<template>
  <div class="user-favorites">
    <a-list
        :grid="{ gutter: 16, column: 4 }"
        :data-source="favorites"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :hoverable="true">
            <template #cover>
              <img :alt="item.title" :src="item.image" />
            </template>
            <a-card-meta :title="item.title">
              <template #description>
                <div>价格: {{ item.price }}</div>
              </template>
            </a-card-meta>
            <template #actions>
              <shopping-cart-outlined key="buy" @click="buyItem(item)" />
              <delete-outlined key="remove" @click="removeFromFavorites(item)" />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ShoppingCartOutlined, DeleteOutlined } from '@ant-design/icons-vue';

const favorites = ref([
  {
    id: 1,
    title: '二��笔记本电脑',
    price: '¥2999',
    image: '/placeholder.svg?height=200&width=200',
  },
  {
    id: 2,
    title: '二手自行车',
    price: '¥399',
    image: '/placeholder.svg?height=200&width=200',
  },
  {
    id: 3,
    title: '二手课本',
    price: '¥50',
    image: '/placeholder.svg?height=200&width=200',
  },
  {
    id: 4,
    title: '二手手机',
    price: '¥1999',
    image: '/placeholder.svg?height=200&width=200',
  },
]);

const buyItem = (item) => {
  console.log('购买商品:', item);
};

const removeFromFavorites = (item) => {
  console.log('从收藏中移除:', item);
  favorites.value = favorites.value.filter(favorite => favorite.id !== item.id);
};
</script>

